<template>
	<view :style="viewColor">
		<view class="hk-content">
			<!--  -->
			<view class="box-uni-set hk-step-box">
				<view class="step-item" v-for="(item,index) in steps" :key="index">
					<view class="item-line" v-if="index>0"></view>
					<view class="item-nt-box">
						<view class="item-num" :class="cur_step >= index?'item-num-sel':''">{{index+1}}</view>
						<view class="item-text" :class="cur_step >= index?'item-text-sel':''">{{item.title}}</view>
					</view>
				</view>
			</view>

			<!-- 描述 -->
			<view class="des-box">
				按中国法例要求，患者购买处方药物时，必须持有有效注册医生发出的处方证明。请填妥及提交有关数据，医生将按序检视，并于诊症后，继续复诊配药的流程。
			</view>

			<!-- 用藥人 -->
			<view class="box-uni-set persion-box">
				<view class="section-box">
					<view class="left">
						<view class="title">用药人</view>
						<text class="require-flag">*</text>
					</view>
				</view>
				<view class="person_list acea-row">
					<view class="item" v-for="(item, index) in personList" :key="index"
						:class="current == index ? 'on' : ''" @click="personChange(index)">
						<text class="iconfont icon-shanchu" @click.stop="delHandle(item)"></text>
						<view class="name line1">{{ item.patient_name }}</view>
						<view class="acea-row row-middle info">
							<image src="/static/images/icon_man.png" v-if="item.patient_gender == 1"></image>
							<image src="/static/images/icon_woman.png" v-if="item.patient_gender == 2"></image>
							{{ item.patient_gender == 1 ? '男' : '女' }} {{ item.patient_age }}岁
						</view>
						<text class="iconfont icon-xuanzhong4" v-if="current == index"></text>
					</view>
					<view class="item acea-row row-center-wrapper add" @click="addSick"><text
							class="iconfont icon-jiahao2"></text></view>
				</view>
			</view>

			<!-- 藥品列表 -->
			<view class="box-uni-set drug-symptom-box">
				<view class="section-box">
					<view class="left">
						<view class="title">请选择线下已确诊疾病</view>
						<text class="require-flag">*</text>
					</view>
					<view class="right">每个药品至少选择一种</view>
				</view>

				<view class="drug-symptom-list">
					<view class="drug-symptom-list-item" v-for="(item,index) in symptomList" :key="index">
						<view class="drug-box">
							<view class="drug-img">
								<image
									:src="(item.cart_info.productAttr && item.cart_info.productAttr.image) || item.cart_info.product.image"
									mode="aspectFit">
								</image>
							</view>
							<view class="drug-name line2">
								<text>{{item.cart_info.product.store_name}}</text>
							</view>
						</view>
						<view class="symptom-list-box">
							<view class="symptom-list-item" v-for="(subItem,subIndex) in item.symptom" :key="subIndex">
								<view class="item-tag" :class="subItem.selected?'item-tag-sel':''"
									@click="clickSymptomStatus(item,subItem)">{{subItem.cate_name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="hk-space" :style="'height:'+botHeight+'px;'"></view>
			<view class="hk-bot-box" id='hk-bot-box-size'>
				<view class="protocol" v-if="rp_info.article_id">
					<checkbox-group @change='ChangeIsDefault'>
						<checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false'
							:checked="protocol ? true : false" />
						本人确认患有相关疾病，及曾接受资格医生的专业诊断，目前病情稳定，并保证提交的数据准确无误，而且对该药物有充分了解，一直未有任何过敏及不良反应。本人已阅读并同意
						<text class="main-color" @click="privacy()">「{{rp_info.article_title}}」</text>之内容。
					</checkbox-group>
				</view>
				<view class="bot-submit-box" @click="clickSubmit">
					<view class="submit-btn">立即复诊开方</view>
				</view>
				<view class="hk-safe"></view>
			</view>

			<!-- 弹窗输入 -->
			<taginput :alert-show="alertShow" @close="alertClose" @confirm="alertConfirm"></taginput>
		</view>
	</view>
</template>

<script>
	import {
		getInquiryList,
		delInquiry,
		getPrescribeSymptom,
		postPrescribeCreate
	} from "@/api/user.js"
	
	import {
		mapGetters
	} from 'vuex';
	import taginput from '@/components/taginput/taginput.vue'
	export default {
		components: {
			taginput,
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'viewColor', 'keyColor']),
		},
		data() {
			return {
				alertShow: false,
				rp_info: {},
				cur_step: 0,
				steps: [{
					id: 0,
					title: '填写信息'
				}, {
					id: 1,
					title: '医生开方'
				}, {
					id: 2,
					title: '下单购买'
				}],
				is_change: false,
				current: -1,
				personList: [],
				formData: {
					inquiry_id: '',
					order_id: '',
					symptom: '',
				},
				diseaseList: [],
				symptomList: [],
				physicalFlag: '', // 点击其他标识 order_product_id 或者 product_id
				protocol: false,
				inAnimation: true,
				botHeight: 120,
			}
		},
		watch: {
			personList(val) {
				var _this = this;
				val.forEach((item, index) => {
					// console.log("rk===>[默认]", item.is_default, this.is_change);
					if (item.is_default == 1 && this.is_change == false) {
						_this.current = index;
						_this.formData.inquiry_id = item.id;
					}
				});
			}
		},
		onLoad(ops) {
			if (ops.rp) {
				this.rp_info = JSON.parse(decodeURIComponent(ops.rp));
				this.getPrescribeSymptom();
			}
			let that = this
			uni.$on('createInquiry', function(){
				that.getInquiryList();
			})
			this.getInquiryList();
		},
		onReady() {
			let that = this;
			this.$util.getRect('#hk-bot-box-size').then(res => {
				that.botHeight = res.height;
			});
		},
		onUnload() {
			uni.$off('createInquiry')
		},
		methods: {
			alertClose() {
				this.alertShow = false;
			},
			alertConfirm(inputVal) {
				this.alertShow = false;
				this.symptomList.forEach(item => {
					if (item.product_id == this.physicalFlag) {
						let newItem = {
							id: 999,
							cate_name: inputVal,
							selected: true,
						};
						item.symptom.unshift(newItem);
						this.updateFormSym(item);
					}
					console.log(item)
				})
			},

			clickSymptomStatus(item, subItem) {
				if (subItem.id != 0) {
					subItem.selected = !subItem.selected;
					this.$forceUpdate();
					this.updateFormSym(item);
				} else {
					//手动输入其他
					this.physicalFlag = item.product_id;
					this.alertShow = true;
					// this.$emit('otherEvent', item.type);
				}
			},
			updateFormSym(item) {
				this.diseaseList.forEach(forItem => {
					if (forItem.product_id == item.product_id) {
						forItem.symptom = [];
						item.symptom.forEach(symItem => {
							if (symItem.selected) {
								forItem.symptom.push(symItem.cate_name);
							}
						})
						 console.log("rk===>[选中的子病症]" + JSON.stringify(forItem));
					}
				})
			},

			dataDeal() {
				this.symptomList.forEach(item => {
					item.symptom.forEach(subItem => {
						subItem.selected = false;
					});
					let disItem = {
						product_id: item.product_id,
						symptom: [],
					}
					this.diseaseList.push(disItem);
				});

			},
			getPrescribeSymptom() {
				let postDic = {
					order_id: this.rp_info.order_id
				}
				getPrescribeSymptom(postDic).then(res => {
					console.log(res)
					this.symptomList = res.data.list;
					this.dataDeal();
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				});
			},
			getInquiryList() {
				getInquiryList().then(res => {
					this.personList = res.data;
				}).catch(err => {});
			},
			personChange(index) {
				this.is_change = true;
				if (this.current != index) {
					this.current = index;
					this.formData.inquiry_id = this.personList[index].id;
				}
			},
			// 刪除
			delHandle(item) {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success(result) {
						if (result.confirm) {
							delInquiry({
									id: item.id
								})
								.then(res => {
									_this.$util.Tips({
										title: res.message,
										icon: 'success'
									});
									if(item.id == _this.formData.inquiry_id){
										_this.current = -1;
										_this.formData.inquiry_id = ''
									}
									_this.getInquiryList();
								})
								.catch(err => {
									return _this.$util.Tips({
										title: err
									});
								});
						}
					}
				});
				return false;
			},
			addSick() {
				let that = this;
				uni.navigateTo({
					url: '/pages/users/add_sick/index',
					// events: {
					// 	refreshEvent() {
					// 		that.getInquiryList()
					// 	}
					// }
				});
			},
			ChangeIsDefault(e) {
				this.protocol = !this.protocol;
			},
			privacy() {
				uni.navigateTo({
					url: "/pages/users/privacy/index?article_id=" + this.rp_info.article_id
				})
			},
			clickSubmit() {

				var _this = this;
				if (!_this.formData.inquiry_id) {
					return _this.$util.Tips({
						title: '请选择就诊人！'
					});
				}
				let disease_pass = true;
				for (var i = 0; i < this.diseaseList.length; i++) {
					let item = this.diseaseList[i];
					if (item.symptom.length <= 0) {
						disease_pass = false;
						break;
					}
				}
				if (!disease_pass) {
					return _this.$util.Tips({
						title: '每个药品至少选择一种病症'
					});
				}
				if (!_this.protocol) {
					return _this.$util.Tips({
						title: '请阅读并确认勾选知情同意协议'
					});
				}

				_this.formData.order_id = _this.rp_info.order_id;

				let new_list = {};
				_this.diseaseList.forEach(item => {
					new_list[item.product_id] = item.symptom
				});
				let new_json = JSON.stringify(new_list);
				_this.formData.symptom = new_json;
				uni.showLoading({
					title:'请稍后...'
				})
				console.log(_this.rp_info.order_id)
				
				postPrescribeCreate(_this.formData).then(res => {
					uni.hideLoading()
					
					// #ifndef MP-WEIXIN
					const eventChannel = this.getOpenerEventChannel();
					if(eventChannel){
						eventChannel.emit('rpSuccess', {data: '1'});
					}
					// #endif
					
					// 用于标记发送socket
					uni.setStorageSync("send_first_msg",1);
					uni.redirectTo({
						url:'/pages/rp/rp_chat/rp_chat?order_id='+_this.rp_info.order_id,
						complete(errMsg){
							console.log(errMsg)
						}
					});
					
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					_this.$util.Tips({
						title: err
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.hk-content {
		padding: 30rpx;
	}

	.box-uni-set {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}

	.section-box {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;

			.title {
				font-weight: bold;
			}

			.require-flag {
				color: #ff0000;
			}
		}

		.right {
			color: #969696;
			font-size: 13px;
		}
	}

	.des-box {
		padding: 30rpx 0;
		color: #969696;
		font-size: 13px;
	}

	.persion-box {
		padding-bottom: 20rpx !important;

		.person_list {
			.item {
				padding: 25rpx 10px 28rpx 15rpx;
				border: solid 1px #e5e5e5;
				border-radius: 10rpx;
				width: calc(33% - 13rpx);
				height: 152rpx;
				margin: 20rpx 20rpx 0 0;
				position: relative;
				overflow: hidden;
				.name{
					margin-right: 10rpx;
				}
				.icon-shanchu {
					position: absolute;
					top: 12rpx;
					right: 12rpx;
					z-index: 1;
				}

				.info {
					margin-top: 15rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						display: block;
						margin-left: -4rpx;
						margin-right: 10rpx;
					}
				}

				&:nth-child(3n) {
					margin-right: 0;
				}

				&.add {
					border: dashed 1px #e5e5e5;
					padding: 0;

					.iconfont {
						font-size: 38rpx;
						color: #ccc;
					}
				}

				&.on {
					border-color: var(--view-theme);
					background-color: var(--view-minorColor);
				}

				.icon-xuanzhong4 {
					position: absolute;
					right: -6rpx;
					bottom: -10rpx;
					font-size: 50rpx;
					color: var(--view-theme);
				}
			}
		}
	}

	.drug-symptom-box {
		margin-top: 30rpx;

		.drug-symptom-list {
			.drug-symptom-list-item {
				padding: 20rpx 0 0;
				border-bottom: 1rpx solid #ccc;

				&:nth-last-child(1) {
					border-bottom: none;
				}

				.drug-box {
					display: flex;
					align-items: center;

					.drug-img {
						width: 60px;
						height: 60px;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.drug-name {
						width: calc(100% - 60px);
						padding: 0 10rpx;
					}
				}

				.symptom-list-box {
					// background-color: #fff000;
					padding: 20rpx 10rpx 0;
					display: flex;
					flex-wrap: wrap;

					.symptom-list-item {
						margin: 0 30rpx 20rpx 0;

						.item-tag {
							padding: 10rpx 16rpx;
							border: 1rpx solid #ccc;
							border-radius: 10rpx;
							font-size: 12px;
							line-height: 16px;
						}

						.item-tag-sel {
							border: 1rpx solid var(--view-theme);
							background-color: var(--view-minorColor);
						}
					}
				}
			}
		}

	}

	.hk-bot-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

		.trembling {
			animation: shake 0.6s;
		}

		.protocol {
			margin-top: 30rpx;
			padding: 0 40rpx;
			color: #999999;
			font-size: 24rpx;
		}

		.main-color {
			color: var(--view-theme);
		}

		.bot-submit-box {
			display: flex;
			justify-content: center;
			padding: 30rpx 0;

			.submit-btn {
				background-color: var(--view-theme);
				color: #fff;
				padding: 20rpx 0;
				display: flex;
				justify-content: center;
				width: 80%;
				border-radius: 100px;
			}
		}
	}


	/deep/ radio .wx-radio-input.wx-radio-input-checked {
		border: 1px solid var(--view-theme) !important;
		background-color: var(--view-theme) !important;
	}

	/deep/ radio .uni-radio-input.uni-radio-input-checked {
		border: 1px solid var(--view-theme) !important;
		background-color: var(--view-theme) !important;
	}

	/deep/ uni-checkbox .uni-checkbox-input {
		border-radius: 19px;
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked,
	uni-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 1px solid var(--view-theme) !important;
		background-color: var(--view-theme) !important;
		color: #fff !important;
	}
</style>